<template>
  <div v-if="addevent">
    <addEventCard @add-event="handleAdd" />
  </div>
</template>

<script setup>
import addEventCard from '../components/addEventCard.vue'
import { ref, watch, onUnmounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useMap } from '@/stores/useMap.js'
import { useUserStore } from '@/stores/user'
const { addevent } = storeToRefs(useUserStore())
const { map, ggMap } = storeToRefs(useMap())
let color 
let currentAttributes = null // 存储当前要素属性
const end = ref(false)
let position

// 处理表单提交
const handleAdd = data => {
  try {
    // 存储属性信息
    currentAttributes = [
      data.eventNumber.value,
      data.eventType.value,
      data.eventLevel.value,
      data.eventTime.value,
      data.eventAddress.value,
      data.carNumber.value,
      data.driverName.value,
      data.eventState.value,
    ];

    // 根据状态设置颜色
    color = data.eventState.value === '0' ? 6 : data.eventState.value === '1' ? 4 : 90;
    end.value = true;
  } catch (error) {
    console.error('处理表单数据失败:', error);
    alert('处理表单数据失败: ' + error.message);
  }
};

// 添加点要素回调函数
function onPntSuccess(data) {
  try {
    if (data.succeed) {
      alert('添加事件成功！');
      // 修复: 使用可选链和value访问
      ggMap.value?.refresh();
    } else {
      alert('添加事件失败！');
    }
  } catch (error) {
    console.error('处理响应失败:', error);
    alert('处理响应失败: ' + error.message);
  }
}

const handleMapClick = e => {
  addevent.value = true;
  position = e.coordinate;
};

//监听表单提交事件
watch(
  () => end.value,
  () => {
    if (end.value) {
      addPoint()
      end.value = false
    }
  }
);

// 监听地图实例
watch(
  () => map.value,
  newMap => {
    if (newMap) {
      try {
        newMap.on('click', handleMapClick);
      } catch (error) {
        console.error('初始化地图交互失败:', error);
      }
    }
  },
  { immediate: true }
);
// 清理资源
onUnmounted(() => {
  try {
    if (map.value) {
      map.value.un('click', handleMapClick)
      // map.value.removeLayer(layer)
    }
  } catch (error) {
    console.error('清理资源失败:', error);
  }
});
//添加事件
function addPoint() {
  //创建一个点形状，描述点形状的几何信息
  const gpoint = new Zondy.Object.GPoint(position[0], position[1]);
  //设置当前点要素的几何信息
  const fGeom = new Zondy.Object.FeatureGeometry({ PntGeom: [gpoint] });
  //随机输出1~8之间的整数,作为新添加的要素的颜色号
  const pntColor = Math.floor(Math.random() * 8 + 1);
  // 设置点要素的样式
  const pointInfo = new Zondy.Object.CPointInfo({
    Angle: 0,
    Color: color, // 使用动态颜色
    Space: 0,
    SymHeight: 5,
    SymID: 21,
    SymWidth: 5,
  });
  // 设置点要素的图形参数
  const webGraphicInfo = new Zondy.Object.WebGraphicsInfo({
    InfoType: 1,
    PntInfo: pointInfo,
  });
  //设置添加点要素的属性信息
  const attValue = currentAttributes;
  // 创建要素
  const feature = new Zondy.Object.Feature({
    fGeom: fGeom,
    GraphicInfo: webGraphicInfo,
    AttValue: attValue,
  });
  //设置要素为点要素
  feature.setFType(1);
  // 创建要素数据集
  const featureSet = new Zondy.Object.FeatureSet();
  featureSet.clear();
  // 设置属性结构
  const cAttStruct = new Zondy.Object.CAttStruct({
    FldName: ['事件编号', '事件类型', '事件等级', '发生时间', '发生地点', '车牌号', '驾驶员', '处理状态'],
    FldNumber: 8,
    FldType: Array(8).fill('string'),
  });
  featureSet.AttStruct = cAttStruct;
  //添加要素到要素数据集
  featureSet.addFeature(feature);

  // 发送请求添加要素
  const editService = new Zondy.Service.EditDocFeature('guanggu', 2, {
    ip: 'localhost',
    port: '8089',
  });
  //执行添加点要素功能
  editService.add(featureSet, onPntSuccess);
}
</script>

<style scoped></style>
